<!--
 * Description: table edit 组件
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/08/12 15:43
-->

<template>
  <div class="issue-edit">
    <!--数据表单-->
    <el-form label-position="left" label-width="100px" :model="formData" size="mini">
      <el-row>
        <!--问题名称-->
        <el-col :span="24">
          <el-form-item :label="$t('Issue.issueName')">
            <el-input
              v-model="formData.issueName"
              v-blur:issueName="formData"
              clearable
              :placeholder="$t('input.placeholder')"
            />
          </el-form-item>
        </el-col>

        <!--问题类型-->
        <el-col :span="12">
          <el-form-item :label="$t('Issue.issueType')">
            <el-select
              v-model="formData.issueType"
              clearable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['dict/dictOptions']('IssueType')"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--问题状态-->
        <el-col :span="12">
          <el-form-item :label="$t('Issue.issueStatus')">
            <el-select
              v-model="formData.issueStatus"
              clearable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['dict/dictOptions']('IssueStatus')"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--优先级-->
        <el-col :span="12">
          <el-form-item :label="$t('Issue.issueLevel')">
            <el-select
              v-model="formData.issueLevel"
              clearable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['dict/dictOptions']('IssueLevel')"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--问题创建人-->
        <el-col :span="12">
          <el-form-item :label="$t('Issue.issueCreateUser')">
            <el-select
              v-model="formData.issueCreateUser"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['user/getUserSimpleCollects']"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
                <span style="float: left;">{{ item.userName }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.team }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!--问题负责人-->
        <el-col :span="12">
          <el-form-item :label="$t('Issue.issueAppointUser')">
            <el-select
              v-model="formData.issueAppointUser"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['user/getUserSimpleCollects']"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
                <span style="float: left;">{{ item.userName }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.team }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!--创建时间-->
        <el-col :span="12">
          <el-form-item :label="$t('Issue.issueCreateTime')">
            <el-date-picker
              v-model="formData.issueCreateTime"
              :placeholder="$t('select.date')"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <!--指派时间-->
        <el-col :span="12">
          <el-form-item :label="$t('Issue.issueAppointTime')">
            <el-date-picker
              v-model="formData.issueAppointTime"
              :placeholder="$t('select.date')"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <!-- 预计解决时间 -->
        <el-col :span="12">
          <el-form-item :label="$t('Issue.issueEstimateTime')">
            <el-date-picker
              v-model="formData.issueEstimateTime"
              :placeholder="$t('select.date')"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 解决时间 -->
        <el-col :span="12">
          <el-form-item :label="$t('Issue.issueResolveTime')">
            <el-date-picker
              v-model="formData.issueResolveTime"
              :placeholder="$t('select.date')"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <!--备注信息-->
        <el-col :span="24">
          <el-form-item :label="$t('Issue.issueRemark')">
            <el-input
              v-model="formData.issueRemark"
              v-blur:issueRemark="formData"
              clearable
              :placeholder="$t('input.placeholder')"
              :rows="3"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 富文本 -->
    <div class="rich-text">
      <quill-editor :content="editText" :options="editorOption" @change="onEditorChange($event)" />
    </div>
  </div>
</template>

<script>
const titleConfig = {
  'ql-bold': '加粗',
  'ql-color': '颜色',
  'ql-font': '字体',
  'ql-code': '插入代码',
  'ql-italic': '斜体',
  'ql-link': '添加链接',
  'ql-background': '背景颜色',
  'ql-size': '字体大小',
  'ql-strike': '删除线',
  'ql-script': '上标/下标',
  'ql-underline': '下划线',
  'ql-blockquote': '引用',
  'ql-header': '标题',
  'ql-indent': '缩进',
  'ql-list': '列表',
  'ql-align': '文本对齐',
  'ql-direction': '文本方向',
  'ql-code-block': '代码块',
  'ql-formula': '公式',
  'ql-image': '图片',
  'ql-video': '视频',
  'ql-clean': '清除字体样式',
  'ql-upload': '文件'
}
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'TableEdit',
  components: { quillEditor },
  props: {
    rowData: {
      type: Object,
      default: () => null
    },
    issueDesc: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      formData: null,
      editorOption: {
        placeholder: '请输入问题描述信息'
      },
      editText: ''
    }
  },
  created() {
    this.pageDataInit()
  },
  mounted() {
    this.toolbarTip()
  },
  methods: {
    toolbarTip() {
      const oToolBar = document.querySelector('.ql-toolbar')
      const aButton = oToolBar.querySelectorAll('button')
      const aSelect = oToolBar.querySelectorAll('select')
      aButton.forEach(function(item) {
        if (item.className === 'ql-script') {
          item.value === 'sub' ? (item.title = '下标') : (item.title = '上标')
        } else if (item.className === 'ql-indent') {
          item.value === '+1' ? (item.title = '向右缩进') : (item.title = '向左缩进')
        } else {
          item.title = titleConfig[item.classList[0]]
        }
      })
      aSelect.forEach(function(item) {
        item.parentNode.title = titleConfig[item.classList[0]]
      })
    },
    pageDataInit() {
      this.editText = this.issueDesc
      this.formData = this.$deepCopy(this.rowData)
    },
    /** 富文本内容变化的监听 */
    onEditorChange(e) {
      this.editText = e.html
    },
    save() {
      this.$bus.$emit('issue-edit', this.formData, this.editText)
    },
    preView() {
      this.$bus.$emit('rich-view', this.editText)
    }
  }
}
</script>
<style lang="scss" scoped>
.issue-edit {
  padding: 0px 10px;
}
.el-form {
  padding-left: 10px;
  .el-col {
    padding-right: 20px;
  }
}

.rich-text {
  padding-left: 10px;
  padding-right: 20px;
}

.quill-editor {
  text-align: left;
}
/deep/.ql-container {
  min-height: 300px !important;
}
</style>
